import React, { useEffect, useState } from 'react'
import '../css/pwdres.css'
import { useNavigate ,useLocation} from 'react-router-dom'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import {  Input, Space } from 'antd';
import axios from 'axios'
import { Button, Modal,  Toast, Divider } from 'antd-mobile'

export default function Tell() {
    const navigate = useNavigate()
    const[pwd1,setpwd1] = useState('')
    const[pwd2,setpwd2] = useState('')

    const luyou = useLocation()
    console.log();
      
    const zhuche = async() =>{
      if(pwd1==pwd2){
        let data = await axios.post('http://127.0.0.1:3000/register', {
          password : pwd1,
          tell:luyou.search.split('=')[1]
      })
     
      console.log(data);
      if (data.data.data.code == 400) {
          Modal.alert({
              content: '密码长度错误',
              onConfirm: () => {
                  console.log('Confirmed');
              }
          })    
      } else {
          // Modal.alert({
          //     content: '账号无误',
          //     onConfirm: () => {
          //         console.log('Confirmed');
          //     }
          // })
          navigate('/login')
      }
      }else{
        Modal.alert({
          content: '两次密码不一致',
          onConfirm: () => {
              console.log('Confirmed');
          }
      })
      }
      
    }
  return (
    <div className='box-pwd'>

        <div className='log-pwd'>
            <img src="/8x.png" alt="" onClick={()=>{
                navigate('/tell')
            }} />
        </div>

        <div className='head-pwd'>
            <h1>请设置密码</h1>
            <p>8-20个字符,不可以是纯数字</p>
        </div>

        <Space direction="vertical" className='but-pwd'>
      <Input.Password placeholder="请输入密码" style={{marginLeft:'20px',marginTop:'50px',width:'320px',height:'45px',opacity:'0.5'}}
      value={pwd1} onChange={(e)=>{
        setpwd1(e.target.value)
      }} />
      <Input.Password placeholder="请再次输入密码"
      value={pwd2} onChange={(e)=>{
        setpwd2(e.target.value)
      }} 
        style={{marginLeft:'20px',marginTop:'10px',width:'320px',height:'45px',opacity:'0.5'}}
        iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
      /> 
      </Space>
         
         <div className='img-pwd'>
            <img src="/7x.png" alt="" onClick={zhuche} />
         </div>
        

    </div>
  )
}
